<template>
	<div>
		<!-- 顶部选项卡 -->
		<scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation :scroll-into-view="scrollInto">
		    <view class="pagecontrol-top-title">
		        <view v-for="(items, index) in itemsArr" :key="index" class="pagecontrol-top-text" @click="changeTab(index)" :id="'tab' + index">
		            <view :class="tabIndex === index ? 'pagecontrol-top-selected' : 'pagecontrol-top-normal'">{{ items }}</view>
		            <view class="pagecontrol-bottom-line" :class="tabIndex === index ? 'pagecontrol-bottom-line-show' : 'pagecontrol-bottom-line-visibility'"></view>
		        </view>
		    </view>
		</scroll-view>
		<!-- 内容 -->
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:' + scrollH + 'px;'">
		    <swiper-item>
		        <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'" @scrolltolower="scrolltolower('source')">
					<!--货源-->
					<view @click="handleDetailSource(item.goodId)" class="source" v-for="(item,index) in sourceList" :key="index">
						<view style="display: flex;align-items: center;width: 100%;">
							<view style="width: 100%;">
								<view style="display: flex;justify-content: space-between;">
									<text>{{item.goodsName}}</text>
									<text>{{item.goodCode}}</text>
									<text>{{goodsType[item.goodsType]}}</text>
									<text>{{item.produceDistrictName||''}}</text>
								</view>
								<view v-if="item.goodsDesc" style="color: #a5a5a5;font-size: 14px;">
									<!--数量、重量、体积-->
									<!-- <text>{{item.num}}件&ensp;{{item.weight}}吨&ensp;{{item.bulk}}方</text> -->
									<text style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">
										物品描述：{{item.goodsDesc}}
									</text>
								</view>
								<view style="color: #a5a5a5;font-size: 14px;display: flex;justify-content: space-between;">
									<span>
										<text>上市时间:</text>
										<text style="margin-left: 5px;">{{item.marketTime||'--'}}</text>
									</span>
									<span>
										<text>创建时间:</text>
										<text style="margin-left: 5px;">{{item.createTime||'--'}}</text>
									</span>
								</view>
							</view>
						</view>
						<view style="display: flex;position: absolute;right: 10px;bottom: 10px;">
							<!-- <view hover-class="buttonHover" style="margin-left: 10px;width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">转运单</view> -->
							<view @click.stop="editSource(item.goodId)" hover-class="buttonHover" style="margin-left: 10px;width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">编辑</view>
							<view @click.stop="deleteSource(item.goodId)" hover-class="buttonHover" style="margin-left: 10px;width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">删除</view>
						</view>
						
					</view>
					<uni-load-more status="more" :status="loadMoreStatus" @clickLoadMore="scrolltolower('source')"></uni-load-more>
					<view style="height: 100px;"></view>
					
					<view class="position" @click="addSource" hover-class="buttonHover" style="position: fixed;margin: 0 auto;left:0;right:0;bottom:10px;width: 80px;height:30px;color:#ffffff;background-color:#bf5f09;;border-radius: 4px;display:flex;justify-content: center;align-items: center;">
						新增&ensp;+
					</view>
		        </scroll-view>
		    </swiper-item>
			<swiper-item>
			    <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'" @scrolltolower="scrolltolower('order')">
					<!--订单-->
					<view style="display: flex;position: fixed;top: 0;left:0;z-index: 9;background-color: #f5f5f5;width: 100%;">
						<view @click="onClickItem(index)" v-for="(item,index) in items" :key="index" style="background-color: #ffffff;margin: 10px;padding:6px;width: 45px;height:15px;border-radius: 12px;display: flex;justify-content: center;align-items: center;">
							<text  :style="{color:current===index?'#bf5f09':'#000000'}">{{item}}</text>
						</view>
					</view>
					<view v-if="current === 0" style="margin-top: 40px;">
						<!--线上订单-->
						<view @click="handleDetailOrder(item.goodOrderId)" class="order" v-for="(item,index) in orderList_online" :key="index">
							<view style="display: flex;align-items: center;width: 100%;">
								<view style="margin-left: 10px;margin-right: 10px;width: 100%;">
									<view style="display: flex;justify-content: space-between;">
										<text>{{item.orderCode}}</text>
										<text v-if="item.waybillId" style="color: #6699ff;font-size: 13px;">运单{{item.outCode}}({{status[item.waybillStatus]}})</text>
									</view>
									<view style="display: flex;justify-content: space-between;color: #6f6f6f;">
										<span style="display: flex;flex-direction: column;align-items: center;">
											<text>{{item.shipName}}</text>
											<text>{{item.originDistractName}}</text>
										</span>
										<text style="display: flex;align-items: center;">→</text>
										<span style="display: flex;flex-direction: column;align-items: center;">
											<text>{{item.deliveryName}}</text>
											<text>{{item.destinationDistractName}}</text>
										</span>
									</view>
									<span v-for="(item_,index_) in item.goodSourceList" :key="index_" style="font-size: 12px;">
										<text style="margin-right: 5px;background-color: #6699ff;color: #ffffff;padding: 2px 5px;border-radius: 6px;">{{item_.goodsName}}</text>
									</span>
									<view v-if="item.goodSourceList" style="font-size: 12px;margin: 5px 0;">
										<text style="background-color: #00cc99;color: #ffffff;padding: 2px 5px;border-radius: 6px;">
											<text>{{ item.goodSourceList ? item.goodSourceList.reduce((total, item1) => total + Number(item1.num), 0) : 0 }}件</text>
											<text> {{ item.goodSourceList ? item.goodSourceList.reduce((total, item1) => total + Number(item1.weight), 0) : 0 }}吨</text>
											<text>{{ item.goodSourceList ? item.goodSourceList.reduce((total, item1) => total + Number(item1.bulk), 0) :0 }}方</text>
										</text>
										<!-- <text style="margin-left: 5px;background-color: #d5892e;color: #ffffff;padding: 2px 5px;border-radius: 6px;">大石网点</text> -->
									</view>
									<view v-if="item.departureTime||item.arrivalTime" style="display: flex;justify-content: space-between;">
										<span style="display: flex;flex-direction: column;text-align: center;">
											<text>计划提货时间:</text>
											<text>{{item.pickupTime?parseTime(item.pickupTime):''}}</text>
										</span>
										<span style="display: flex;flex-direction: column;text-align: center;">
											<text>计划到达时间:</text>
											<text>{{item.arrivalTime?parseTime(item.arrivalTime):''}}</text>
										</span>
									</view>
									<view>
										<text>提货单号：{{item.pickupOrderNo}}</text>
										<!-- <text style="margin-left: 5px;">【{{status[item.status]||'暂无状态'}}】</text> -->
									</view>
								</view>
							</view>
							<view style="display: flex;position: absolute;right: 10px;bottom: 10px;">
								<view @click.stop="toWaybill(item)" hover-class="buttonHover" style="margin-left: 10px;width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">转运单</view>
							</view>
							
						</view>
						<uni-load-more status="more" :status="loadMoreStatus" @clickLoadMore="scrolltolower('order')"></uni-load-more>
						<view style="height: 100px;"></view>
					</view>
					<view v-else-if="current === 1" style="margin-top: 40px;">
						<!--线下订单-->
						<view @click="handleDetailOrder(item.goodOrderId)" class="order" v-for="(item,index) in orderList_offline" :key="index">
							<view style="display: flex;align-items: center;width: 100%;">
								<view style="margin-left: 10px;margin-right: 10px;width: 100%;">
									<view style="display: flex;justify-content: space-between;">
										<text>{{item.orderCode}}</text>
										<text v-if="item.waybillId" style="color: #6699ff;font-size: 13px;">运单{{item.outCode}}({{status[item.waybillStatus]}})</text>
									</view>
									<view style="display: flex;justify-content: space-between;color: #6f6f6f;">
										<span style="display: flex;flex-direction: column;align-items: center;">
											<text>{{item.shipName}}</text>
											<text>{{item.originDistractName}}</text>
										</span>
										<text style="display: flex;align-items: center;">→</text>
										<span style="display: flex;flex-direction: column;align-items: center;">
											<text>{{item.deliveryName}}</text>
											<text>{{item.destinationDistractName}}</text>
										</span>
									</view>
									<span v-for="(item_,index_) in item.goodSourceList" :key="index_" style="font-size: 12px;">
										<text style="margin-right: 5px;background-color: #6699ff;color: #ffffff;padding: 2px 5px;border-radius: 6px;">{{item_.goodsName}}</text>
									</span>
									<view v-if="item.goodSourceList" style="font-size: 12px;margin: 5px 0;">
										<text style="background-color: #00cc99;color: #ffffff;padding: 2px 5px;border-radius: 6px;">
											<text>{{ item.goodSourceList ? item.goodSourceList.reduce((total, item1) => total + Number(item1.num), 0) : 0 }}件</text>
											<text> {{ item.goodSourceList ? item.goodSourceList.reduce((total, item1) => total + Number(item1.weight), 0) : 0 }}吨</text>
											<text>{{ item.goodSourceList ? item.goodSourceList.reduce((total, item1) => total + Number(item1.bulk), 0) :0 }}方</text>
										</text>
										<!-- <text style="margin-left: 5px;background-color: #d5892e;color: #ffffff;padding: 2px 5px;border-radius: 6px;">大石网点</text> -->
									</view>
									<view v-if="item.departureTime||item.arrivalTime" style="display: flex;justify-content: space-between;">
										<span style="display: flex;flex-direction: column;text-align: center;">
											<text>计划提货时间:</text>
											<text>{{item.pickupTime?parseTime(item.pickupTime):''}}</text>
										</span>
										<span style="display: flex;flex-direction: column;text-align: center;">
											<text>计划到达时间:</text>
											<text>{{item.arrivalTime?parseTime(item.arrivalTime):''}}</text>
										</span>
									</view>
									<view>
										<text>提货单号：{{item.pickupOrderNo}}</text>
										<!-- <text style="margin-left: 5px;">【{{status[item.status]||'暂无状态'}}】</text> -->
									</view>
								</view>
							</view>
							<view style="display: flex;position: absolute;right: 10px;bottom: 10px;">
								<view @click.stop="toWaybill(item)" hover-class="buttonHover" style="margin-left: 10px;width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">转运单</view>
								<view @click.stop="editOrder(item.goodOrderId)" hover-class="buttonHover" style="margin-left: 10px;width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">编辑</view>
								<view @click.stop="deleteOrder(item.goodOrderId,index)" hover-class="buttonHover" style="margin-left: 10px;width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">删除</view>
							</view>
							
						</view>
						<uni-load-more status="more" :status="loadMoreStatus" @clickLoadMore="scrolltolower('order')"></uni-load-more>
						<view style="height: 100px;"></view>
						
						<view @click="addOrder" hover-class="buttonHover" style="position: fixed;margin: 0 auto;left:0;right:0;bottom:10px;width: 80px;height:30px;color:#ffffff;background-color:#bf5f09;;border-radius: 4px;display:flex;justify-content: center;align-items: center;">
							新增&ensp;+
						</view>
					</view>
			    </scroll-view>
			</swiper-item>
		</swiper>
		<!--引导页-->
		<guide :index="1"></guide>
	</div>
</template>

<script>
	import {
		getSourceList,
		deleteSource
	} from '@/api/system/source.js'
	import {
		getOrderList,
		deleteOrder
	} from '@/api/system/order.js';
	import {getDicts} from '@/api/system/dict.js'
	import guide from '@/components/guide/guide.vue'
	
	export default {
		components: {
			guide
		},
		data() {
			return {
				itemsArr: ['货源','订单'],
				items: ['线上', '线下'],
				current: 0,
				 tabIndex: 0,
				 scrollH: 700,
				 scrollInto: '',
				 
				 sourceList: [],
				 orderList_online:[],
				 orderList_offline: [],
				 
				 //货物类型
				 goodsType:[],
				 //运单状态
				 status:[],
				 
				 //货源列表页大小
				 pageNum_source:10,
				 //订单列表页大小
				 pageNum_order:10,
				 //线上订单
				 pageNum_order_line:10,
				 
				 //上拉触底节流标识
				 flag:true,
				 //加载更多
				 loadMoreStatus:'more',
			}
		},
		onLoad(e) {
		    uni.getSystemInfo({
		        success: res => {
		            this.scrollH = res.windowHeight-40;
		        }
		    });
		},
		created() {
			//加载货源列表
			this.getSourceList()
		},
		computed: {
			parseTime() {
			   return function (time) {
			        let dateee = new Date(time).toJSON();
			        let date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')  
			        return date
			    }
			 }
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e) {
					this.current = e
				}
				if(this.current===0)
				{
					this.getOrderList_online()
				}
				else
				{
					this.getOrderList()
				}
			},
			// 触底的时候请求数据，即为上拉加载更多
			scrolltolower(name){
				this.loadMoreStatus='loading'
				if(this.flag){
				    setTimeout(()=>{
						if(name==='source'){
							this.pageNum_source+=10;
							this.getSourceList()
						}
				        else if(name==='order'){
							if(this.current===0)
							{
								this.pageNum_order_line+=10;
								this.getOrderList_online()
							}
							else
							{
								this.pageNum_order+=10;
								this.getOrderList()
							}
						}
				        this.flag = true;
				    },1000);
				}
				this.flag = false;
			},
			//接受提交后跳转的顶部导航栏位置
			otherFun(tabIndex,order) {
				if(tabIndex){
					uni.showLoading({
						title: '正在加载',
					})
					switch (tabIndex) {
						case '0':
							//加载货源列表
							this.getSourceList()
							break;
						case '1':
							//加载订单列表
							if(this.current===0)
							{
								this.getOrderList_online()
							}
							else
							{
								this.getOrderList()
							}
							break;
						default:
							break;
					}
				}else{
					return
				}
				if(order==='order')
				{
					//加载订单列表
					if(this.current===0)
					{
						this.getOrderList_online()
					}
					else
					{
						this.getOrderList()
					}
				}
			},
			//获取货源列表
			async getSourceList() {
				//加载货物类型
				getDicts('goods_type').then(res=>{
					res.data.forEach(item=>{
						this.goodsType[item.dictValue]=item.dictLabel
					})
				})
				await getSourceList({pageNum:1,pageSize:this.pageNum_source}).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.sourceList = res.rows
						this.loadMoreStatus=res.rows.length===this.pageNum_source?'more':'noMore'
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			//获取线下订单列表
			async getOrderList() {
				//加载运单状态
				getDicts('waybill_status').then(res=>{
					res.data.forEach(item=>{
						this.status[item.dictValue]=item.dictLabel
					})
				})
				//goodOrderType订单类型：0.线下订单 1.线上订单
				await getOrderList({pageNum:1,pageSize:this.pageNum_order,goodOrderType:0}).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.orderList_offline = res.rows||[]
						this.loadMoreStatus=res.rows.length===this.pageNum_order?'more':'noMore'
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			//获取线上订单列表
			async getOrderList_online() {
				//加载运单状态
				getDicts('waybill_status').then(res=>{
					res.data.forEach(item=>{
						this.status[item.dictValue]=item.dictLabel
					})
				})
				//goodOrderType订单类型：0.线下订单 1.线上订单
				await getOrderList({pageNum:1,pageSize:this.pageNum_order_line,goodOrderType:1}).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.orderList_online = res.rows||[]
						this.loadMoreStatus=res.rows.length===this.pageNum_order_line?'more':'noMore'
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			// 切换选项
			changeTab(index) {
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index;
				// 滚动到指定元素
				this.scrollInto = 'tab' + index;
				switch (index) {
					case 0:
						//加载货源列表
						this.getSourceList()
						break;
					case 1:
						//加载订单列表
						if(this.current===0)
						{
							this.getOrderList_online()
						}
						else
						{
							this.getOrderList()
						}
						break;
					default:
						break;
				}
			},
			// 监听滑动
			onChangeTab(e) {
				uni.showLoading({
					title: '正在加载',
				})
				this.changeTab(e.detail.current);
			},
			//新增货源
			addSource(){
				uni.navigateTo({
					url:'/pages-source/source/addSource/addSource'
				})
			},
			//编辑货源
			editSource(goodId) {
				uni.navigateTo({
					url: '/pages-source/source/addSource/addSource?goodId='+goodId
				})
			},
			//删除货源
			deleteSource(goodId) {
				let that=this
				uni.showModal({
					title: '提示',
					content: '确定删除此条数据吗？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在删除...',
							})
							deleteSource(goodId).then(res2 => {
								uni.hideLoading()
								if (res2.code == '200') {
									uni.showToast({
										icon: 'none',
										title: '删除成功'
									})
									
									//重新加载货源列表
									this.pageNum_source=1;
									that.getSourceList()
								} else {
									uni.showToast({
										icon: 'none',
										title: res2.msg
									})
								}
							})
						}
					}
				});
			},
			//货源详情
			handleDetailSource(goodId){
				uni.navigateTo({
					url: '/pages-source/source/addSource/detailsSource?goodId='+goodId
				})
			},
			//新增订单
			addOrder(){
				uni.navigateTo({
					url:'/pages-source/source/addOrder/addOrder'
				})
			},
			//转运单
			toWaybill(orderInfo){
				if(orderInfo.status!=='110')
				{
					uni.showToast({
						icon:'none',
						title:'请选择未取消的订单'
					})
					return
				}
				if(orderInfo.waybillId)
				{
					uni.showToast({
						icon:'none',
						title:'请选择未转运单的订单'
					})
				  return
				}
				orderInfo.goodSourceList.forEach(item=>{
					item.pickupOrderNo=orderInfo.pickupOrderNo
					item.goodsType=''+item.goodsType
					item.packingType=''+item.packingType
					item.originGoodOrderId=orderInfo.goodOrderId
					item.orderCode=orderInfo.orderCode //订单号
				})
				let form={
					shipId:orderInfo.shipId,  //发货方id
					shipName:orderInfo.shipName,  //发货方名称
					shipNetId:orderInfo.shipNetId, //发货方网点id
					shipDistrictId:orderInfo.originDistractId,  //发货方省市区
					shipDistrictName:orderInfo.originDistractName,  //发货方省市区名称
					shipAddress:orderInfo.originAddress,  //发货方详细地址
					shipContacts:orderInfo.shipContacts,  //发货方联系人
					shipContactTel:orderInfo.shipContactTel,  //发货方联系电话
					deliveryId:orderInfo.deliveryId,  //收货方id
					deliveryName:orderInfo.deliveryName,  //收货方名称
					//deliveryNetId:this.ids[0].deliveryNetId, //收货方网点id
					deliveryDistrictId:orderInfo.destinationDistractId,  //收货方省市区
					deliveryDistrictName:orderInfo.destinationDistractName,  //收货方省市区名称
					deliveryAddress:orderInfo.destinationAddress,  //收货方详细地址
					deliveryContacts:orderInfo.deliveryContacts,  //收货方联系人
					deliveryContactTel:orderInfo.deliveryContactTel,  //收货方联系电话
					shipPlanTime:orderInfo.pickupTime,  //计划提货时间
					shipPickUpWay:'3',  //发货提货方式（发货地直达）
					deliveryPlanTime:orderInfo.arrivalTime,  //计划到达时间
					deliveryPickUpWay:'3',  //到达提货方式（收货地直达）
					goodSourceList:orderInfo.goodSourceList,  //货物信息
					orderCodeList:[orderInfo.pickupOrderNo+'('+orderInfo.orderCode+')'],    //提货单号
					waybillValueAdd:{
						parcelInsuranceFee:'',
						receiptFee:'',
						warehouseFee:'',
						loadingFee:'',
						unloadFee:'',
						drayage:'',
						otherFee:''
					},
					goodOrderIdList:[orderInfo.goodOrderId]     //记录订单号
				}
				uni.showModal({
					title: '提示',
					content: '确定跳转运单吗？',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages-operation/operation/addWaybill/addWaybill?orderInfo=' + JSON.stringify(form)
							})
						}
					}
				});
			},
			//编辑订单
			editOrder(goodOrderId) {
				uni.navigateTo({
					url: '/pages-source/source/addOrder/addOrder?goodOrderId=' + goodOrderId
				})
			},
			//删除订单
			deleteOrder(goodOrderId,index) {
				if(this.orderList[index].parentId!=0)
				{
					uni.showToast({
						icon:'none',
						title:'子订单无法删除'
					})
				    return
				}
				
				let that=this
				uni.showModal({
					title: '提示',
					content: '确定删除此条数据吗？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在删除...',
							})
							deleteOrder(goodOrderId).then(res2 => {
								uni.hideLoading()
								if (res2.code == '200') {
									uni.showToast({
										icon: 'none',
										title: '删除成功'
									})
									
									//重新加载订单列表
									this.pageNum_order=1;
									that.getOrderList()
								} else {
									uni.showToast({
										icon: 'none',
										title: res2.msg
									})
								}
							})
						}
					}
				});
			
			},
			//订单详情
			handleDetailOrder(goodOrderId){
				uni.navigateTo({
					url: '/pages-source/source/addOrder/detailsOrder?goodOrderId=' + goodOrderId
				})
			}
		},
	}
</script>

<style scoped>
.pagecontrol-top-scroll {
    height: 40px;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    border-bottom: 1rpx solid #ededed;
	background-color: #f8f8f8;
}

.pagecontrol-top-title {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.pagecontrol-top-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pagecontrol-top-normal {
    color: #656565;
    font-size: 16px;
}

.pagecontrol-top-selected {
    color: #000000;
    font-weight: bold;
    font-size: 16px;
}

.pagecontrol-bottom-line {
    width: 50vw;
    height: 3px;
    margin-top: 8px;
    background-color: #bf5f09;
	border-radius: 11px;
}

.pagecontrol-bottom-line-show {
    visibility: visible;
}

.pagecontrol-bottom-line-visibility {
    visibility: hidden;
}
.source{
	min-height: 100px;
	padding: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: 1px solid #ededed;
	background-color: #ffffff;
	position: relative;
}
.order{
	min-height: 140px;
	padding: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: 1px solid #ededed;
	background-color: #ffffff;
	position: relative;
}
.buttonHover{
	opacity: 0.6;
}
</style>